
/* 
shallowReactive:浅的劫持.监视浅的响应数据
reactive:深的
*/
const reactiveHandler={
    get(target,prop){
        if(prop ==='_is_reactive') return true
        const result = Reflect.get(target,prop)
        console.log('拦截了读取数据',prop,result);
        return result
    },
    set(target,prop,value){
        const result = Reflect.set(target,prop,value)
        console.log('拦截了修改数据或者添加数据');
        return result
    },
    deleteProperty(target,prop) {
        const result = Reflect.deleteProperty(target,prop)
        console.log('拦截了删除数据',prop);
        return result
    }
}
function shallowReactive(target) {
    if(target && typeof target === 'object'){
        return new Proxy(target,reactiveHandler)
    }
    return target
}
function reactive(target) {
    if(target && typeof target === 'object'){
        if(Array.isArray(target)) {
            target.forEach((item,index)=>{
                target[index]=reactive(item)
            })
        }else {
                Object.keys(target).forEach(key=>{
                    target[key] = reactive(target[key])
                })
        }
        return new Proxy(target,reactiveHandler)
    }
    return target
}
/* 
shallowReadonly:浅的只读
readonly:深的只读
*/
const readonlyHandler = {
    get (target, prop) {
        if(prop === '_is_readonly') return true
        if (prop === '_is_readonly') return true
        const result = Reflect.get(target, prop)
        console.log('拦截到了读取数据了', prop, result)
        return result
      },
      set (target, prop, value) {
        console.warn('只能读取数据,不能修改数据或者添加数据')
        return true
      },
      deleteProperty (target, prop) {
        console.warn('只能读取数据,不能删除数据')
        return true
      }

}
function shallowReadonly(target) {
    if(target && typeof target === 'object') {
        return new Proxy(target,readonlyHandler)
    }
    return target
}
function readonly(target) {
    if(target && typeof target === 'object') {
        if(Array.isArray(target)) {
            target.forEach((item,index)=>{
                target[index]=readonly(item)
            })
        }else {
            Object.keys(target).forEach(key=>{
                target[key]=readonly(target[key])
            })
        }
        return new Proxy(target,readonlyHandler)
    }
    return target
}
/* 
shallowRef
ref
*/
function shallowRef(target) {
    return {
        _value:target,
        get value() {
            console.log('劫持了读取数据');
            return this._value
        },
        set value(val) {
            console.log('劫持了修改数据,准备更新界面',val);
            this._value=val
        },
    }
}
function ref(target) {
    target = reactive(target)
    return {
        _is_ref:true,
        _value:target,
        get value() {
            console.log('劫持了读取数据');
            return this._value
        },
        set value(val) {
            console.log('劫持了修改数据,准备更新界面',val);
            this._value=val
        },
    }
}

/* 
isRef
isReactive
isReadonly
isProxy  判断当前对象时候是reactive或者readonly对象
*/
function isRef(obj) {
    return obj && obj._is_ref
}
function isReactive(obj) {
    return obj && obj._is_reactive
}
function isReadonly(obj) {
    return obj && obj._is_readonly
}
function isProxy(obj) {
    return isReactive(obj) || isReadonly(obj)
}